<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.name">
        <router-link :to="item.path" >{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: '插值示例',
          path: 'mustache',
        },
        {
          name: '指令示例',
          path: 'directive',
        },
        {
          name: '组件使用示例',
          path: 'ComponentDemo',
        },
        {
          name: '组件生命周期示例',
          path: 'lifecyle',
        },
        {
          name: '插槽演示',
          path: 'slots',
        },
        {
          name: '响应式演示',
          path: 'reactive',
        },
        {
          name: '计算属性与Watch',
          path: 'computedAndWatch',
        },
      ],
    };
  },
}
</script>

<style>

</style>